/**
 * Created by Freeman on 2016/7/29.
 */
import React, {Component, PropTypes} from 'react'
import {bindActionCreators} from 'redux'
import {connect} from 'react-redux'
import Card from '../components/Card'
import List from '../components/List'
import Messages from '../components/Messages'
import Text from  '../components/Text'
import * as actions from '../actions'

class App extends Component {
    render() {
        const {auth,userList,sessionList, actions} = this.props;

        let session = sessionList.items[sessionList.sessionIndex];

        return (
            <div id="chat">
                <div className="sidebar">
                    <Card auth={auth} actions={actions} />
                    <List userList={userList} session={session} actions={actions}/>
                </div>
                <div className="main">
                    <Messages auth={auth} session={session} userList={userList} sessionList={sessionList} actions={actions}/>
                    <Text actions={actions}/>
                </div>
            </div>
        )
    }
}

App.propTypes = {
    auth: PropTypes.object.isRequired,
    userList:PropTypes.object.isRequired,
    sessionList:PropTypes.object.isRequired,
    actions: PropTypes.object.isRequired
}

function mapStateToProps(state) {
    return {
        auth: state.auth,
        userList:state.userList,
        sessionList:state.sessionList
    }
}
function mapDispatchToProps(dispatch) {
    return {
        actions: bindActionCreators(actions, dispatch)
    }
}


export default connect(
    mapStateToProps,
    mapDispatchToProps
)(App)